<!--
 * @Author: 曹捷
 * @Date: 2019-08-28 09:55:33
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-08-18 10:53:54
 * @Description: 图片详情查看  可以左右切换和缩略图预览滑动
 -->
<template>
  <view class="container full-home">
    <top background="transparent" v-bind:navigator="navigator"></top>
    <swiper :current="indexs" @change="swiperChange" class="swiperBox">
      <swiper-item :key="index" @click="preImg(index)" class="swiperBox-item" v-for="(item,index) in list">
        <image :src="item" class="image" mode="widthFix" />
      </swiper-item>
    </swiper>
    <div class="fixed-desc">
      <div class="backFull"></div>
      {{descList[indexs] || ''}}
    </div>

    <div class="m-t-10 p-l-10">
      <uni-tag :key="item" :mark="true" :text="item" class="m-b-10 m-r-10" type="primary" v-for="item in tagList" />
    </div>
    <scroll-view :scroll-left="scrollLeft" class="scrollBoxs" scroll-x="true">
      <block :key="i" v-for="(itm,i) in list">
        <view :class="{'active': indexs == i }" @tap="scroll(i)" class="scrollBox">
          <image :src="itm" class="image" mode="aspectFill" />
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
import top from '@/app-modules/components/navigator/navigator.vue'
export default {
  data() {
    return {
      navigator: {
        title: '',
      },
      list: [],
      descList: [],
      imgLength: 0,
      indexs: 0,
      imgShow: false,
      scrollLeft: 0,
      options: {},
      dataList: [],
    }
  },
  watch: {
    indexs(value) {
      let itemIndex = this.indexs > 0 ? this.indexs - 1.5 : this.indexs
      this.scrollLeft = itemIndex * uni.upx2px(148)
      this.navigator.title = parseInt(this.indexs) + 1 + '/' + this.imgLength
    },
  },
  computed: {
    tagList() {
      if (this.options.tag) {
        let tag = this.dataList[this.indexs][this.options.tag]
        if (tag) {
          return tag.split('-')
        }
      }
      return []
    },
  },
  onLoad(e) {
    let list = uni.getStorageSync('photo_look')
    this.dataList = list
    this.options = e
    list.forEach((element) => {
      this.descList.push(element[e.text])
      this.list.push(element[e.img])
    })
    this.imgLength = this.list.length
    this.indexs = e.index
  },
  methods: {
    swiperChange(e) {
      this.indexs = e.detail.current
    },
    preImg(index) {
      if (this.imgShow) {
        //防止点击过快导致重复调用
        return
      }
      this.imgShow = true
      setTimeout(() => {
        this.imgShow = false
      }, 1000)
      setTimeout(() => {
        uni.previewImage({
          current: this.list[index],
          urls: this.list,
          success() {},
        })
      }, 150)
    },
    scroll(e) {
      this.indexs = e
    },
  },
  components: {
    top,
  },
}
</script>

<style scoped lang="scss">
.container /deep/ .login {
  background-color: #222 !important;
}
.container {
  height: 100%;
  display: flex;
  background-color: #222;
  flex-direction: column;
}
.swiperBox {
  display: flex;
  flex: 1;
  background-color: #222;
  margin-top: 130upx;
}
.swiperBox-item {
  display: flex;
  align-items: center;
  width: 100%;
}
.swiperBox-item image {
  width: 100%;
}
.uni-tag {
  display: inline-block;
}
.fixed-desc {
  position: fixed;
  bottom: 150rpx;
  left: 0;
  right: 0;
  color: #ffffff;
  padding: 0 10rpx;

  .backFull {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
.scrollBoxs {
  display: flex;
  white-space: nowrap;
  width: 96%;
  height: 150rpx;
  padding-top: 4rpx;
  background-color: #222;
  margin: 0 auto;
}
.scrollBox {
  display: inline-block;
  white-space: nowrap;
  width: 140upx;
  height: 140upx;
  margin-right: 0upx;
  border: 4upx solid #222;
}
.scrollBox .image {
  width: 96%;
  height: 96%;
  padding: 2%;
}
.active {
  border-radius: 10upx;
  border: 4upx solid #cccccc;
}
</style>
